<template>
  <!-- 预览 -->
  <MdPreview :modelValue="props.content" :id="editorId" :previewTheme="props.theme" />
  <!-- 目录 -->
  <div class="md:block hidden">
    <MdCatalog
      class="fixed z-[100] right-16 top-8 max-h-[calc(100vh-2rem)] w-[220px] overflow-auto px-4 py-6
      border-[1px] border-[var(--border-color)] bg-[var(--bg-color)] text-[var(--text-color)]" 
      :editorId="editorId"
      :scrollElement="scrollElement"
      :previewTheme="props.theme"
    />
  </div>
</template>

<script setup>
import { MdPreview, MdCatalog } from "md-editor-v3";

const props = defineProps({
  content: {
    type: String,
    default: "",
  },
  theme: {
    type: String,
    default: "vuepress", // 预览主题，默认使用
  },
});

const scrollElement = document.documentElement;
const editorId = "markdown-editor";
</script>
